<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <sdn-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <sdn-menu-item index="1">处理中心</sdn-menu-item>
        <sdn-submenu index="2">
          <template slot="title">我的工作台</template>
          <sdn-menu-item index="2-1">选项1</sdn-menu-item>
          <sdn-menu-item index="2-2">选项2</sdn-menu-item>
          <sdn-menu-item index="2-3">选项3</sdn-menu-item>
          <sdn-submenu index="2-4">
            <template slot="title">选项4</template>
            <sdn-menu-item index="2-4-1">选项1</sdn-menu-item>
            <sdn-menu-item index="2-4-2">选项2</sdn-menu-item>
            <sdn-menu-item index="2-4-3">选项3</sdn-menu-item>
          </sdn-submenu>
        </sdn-submenu>
        <sdn-menu-item index="3" disabled>消息中心</sdn-menu-item>
        <sdn-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></sdn-menu-item>
      </sdn-menu>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  setup() {
    const btnDesc = {
      title: "NavMenu 导航菜单",
      describe: "为网站提供导航功能的菜单。",
      codeBlock: `<sdn-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <sdn-menu-item index="1">处理中心</sdn-menu-item>
        <sdn-submenu index="2">
          <template slot="title">我的工作台</template>
          <sdn-menu-item index="2-1">选项1</sdn-menu-item>
          <sdn-menu-item index="2-2">选项2</sdn-menu-item>
          <sdn-menu-item index="2-3">选项3</sdn-menu-item>
          <sdn-submenu index="2-4">
            <template slot="title">选项4</template>
            <sdn-menu-item index="2-4-1">选项1</sdn-menu-item>
            <sdn-menu-item index="2-4-2">选项2</sdn-menu-item>
            <sdn-menu-item index="2-4-3">选项3</sdn-menu-item>
          </sdn-submenu>
        </sdn-submenu>
        <sdn-menu-item index="3" disabled>消息中心</sdn-menu-item>
        <sdn-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></sdn-menu-item>
      </sdn-menu>`,
      attrs: [{
        "name": "mode",
        "describe": "模式",
        "type": "string",
        "emun": "horizontal / vertical",
        "default": "vertical",
        "": ""
      }, {
        "name": "collapse",
        "describe": "是否水平折叠收起菜单（仅在 mode 为 vertical 时可用）",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE",
        "": ""
      }, {
        "name": "background-color",
        "describe": "菜单的背景色（仅支持 hex 格式）",
        "type": "string",
        "emun": "—",
        "default": "#ffffff",
        "": ""
      }, {
        "name": "text-color",
        "describe": "菜单的文字颜色（仅支持 hex 格式）",
        "type": "string",
        "emun": "—",
        "default": "#303133",
        "": ""
      }, {
        "name": "active-text-color",
        "describe": "当前激活菜单的文字颜色（仅支持 hex 格式）",
        "type": "string",
        "emun": "—",
        "default": "#409EFF",
        "": ""
      }, {
        "name": "default-active",
        "describe": "当前激活菜单的 index",
        "type": "string",
        "emun": "—",
        "default": "—",
        "": ""
      }, {
        "name": "default-openeds",
        "describe": "当前打开的 sub-menu 的 index 的数组",
        "type": "Array",
        "emun": "—",
        "default": "—",
        "": ""
      }, {
        "name": "unique-opened",
        "describe": "是否只保持一个子菜单的展开",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE",
        "": ""
      }, {
        "name": "menu-trigger",
        "describe": "子菜单打开的触发方式(只在 mode 为 horizontal 时有效)",
        "type": "string",
        "emun": "hover / click",
        "default": "hover",
        "": ""
      }, {
        "name": "router",
        "describe": "是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转",
        "type": "boolean",
        "emun": "—",
        "default": "FALSE",
        "": ""
      }, {
        "name": "collapse-transition",
        "describe": "是否开启折叠动画",
        "type": "boolean",
        "emun": "—",
        "default": "TRUE",
        "": ""
      }],
      methods: [
        {
          "name": "open",
          "describe": "展开指定的 sub-menu",
          "params": "index: 需要打开的 sub-menu 的 index"
        }, {"name": "close", "describe": "收起指定的 sub-menu", "params": "index: 需要收起的 sub-menu 的 index"}],
      events: [
        {
          "name": "select",
          "describe": "菜单激活回调",
          "params": "index: 选中菜单项的 index, indexPath: 选中菜单项的 index path"
        }, {
          "name": "open",
          "describe": "sub-menu 展开的回调",
          "params": "index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path"
        }, {
          "name": "close",
          "describe": "sub-menu 收起的回调",
          "params": "index: 收起的 sub-menu 的 index， indexPath: 收起的 sub-menu 的 index path"
        }]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style></style>
